<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
	<head>
		<title>大数据可视化平台登录界面</title>

		<link rel="stylesheet" href="/css/style.css" />
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
		<script type="application/x-javascript">
			addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
		</script>
	</head>
	<body>
		<h1></h1>
		<div class="main-agileinfo" id="login">
			<h2>大数据可视化平台登录界面</h2>
			<form action="javascriipt:void(0);" method="post">
				<input
					type="text"
					v-model.trim="user.userName"
					name="name"
					class="name"
					placeholder="Usename"
					required="required"
				/>
				<input
					type="password"
					v-model="user.password"
					name="password"
					class="password"
					placeholder="Password"
				/>
				<div>
					<input
						class="form-control input-val"
						type="text"
						v-model="input_value"
						placeholder="请输入验证码（不区分大小写）"
						style="float: left; width: 65%; margin-bottom: 0px"
					/>
					<canvas id="canvas" @click="draw()" :width="width" :height="height"></canvas>
				</div>
				<div class="clear"></div>
				<input type="button" value="Login" @click="login()" />
			</form>
		</div>
		<script>
			var login = new Vue({
				el: "#login",
				data: {
					user: {
						userName: "",
						password: "",
					},
					//生成的验证码
					show_num: [],
					//输入的验证码
					input_value: "",
					width: 90,
					height: 36,
				},
				methods: {
					login: function () {
						var val = this.input_value.toLowerCase();
						var num = this.show_num.join("");
						console.log(num);
						if (val == "") {
							// layer.msg("请输入验证码！", { icon: 0 });
							alert("请输入验证码");
						} else if (val != num) {
							// layer.msg("验证码错误！请重新输入！", { icon: 0 });
							alert("验证码错误，请重新输入");
							this.input_value = "";
							this.draw(this.show_num);
						} else {
							if (this.user.userName == "" || this.user.password == "") {
								alert("请输入用户名或者密码");
							} else {
								console.log(this.user.userName);
								console.log(this.user.password);
							}
							var self = this;
							$.ajax({
								url: "http://www.sfac.xyz/api/login",
								type: "post",
								contentType: "application/json",
								data: JSON.stringify(self.user),
								success: function (rs) {
									if (rs.status == 200) {
										alert(rs.message);
										console.log(rs.data);
										// 跳转到大数据模板
										window.location.href = "127.0.0.1:8080/index";
									} else {
										console.log(rs.message);
										alert("用户名或者密码错误，请重新输入");
										self.input_value = "";
										self.draw(self.show_num);
									}
								},
								error: function (rs) {
									console.log("失败");
									console.log(rs);
								},
							});
						}
					},

					test: function () {
						this.draw(this.show_num);
					},
					draw: function () {
						var canvas_width = this.width;

						var canvas_height = this.height;

						var canvas = document.getElementById("canvas"); //获取到canvas的对象

						var context = canvas.getContext("2d"); //获取到canvas画图的环境

						canvas.width = canvas_width;

						canvas.height = canvas_height;

						var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";

						var aCode = sCode.split(",");

						var aLength = aCode.length; //获取到数组的长度

						for (var i = 0; i <= 3; i++) {
							var j = Math.floor(Math.random() * aLength); //获取到随机的索引值

							var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度

							var txt = aCode[j]; //得到随机的一个内容

							this.show_num[i] = txt.toLowerCase();

							var x = 10 + i * 20; //文字在canvas上的x坐标

							var y = 20 + Math.random() * 8; //文字在canvas上的y坐标

							context.font = "bold 23px 微软雅黑";

							context.translate(x, y);

							context.rotate(deg);

							context.fillStyle = this.randomColor();

							context.fillText(txt, 0, 0);

							context.rotate(-deg);

							context.translate(-x, -y);
						}

						for (var i = 0; i <= 5; i++) {
							//验证码上显示线条

							context.strokeStyle = this.randomColor();

							context.beginPath();

							context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);

							context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);

							context.stroke();
						}

						for (var i = 0; i <= 30; i++) {
							//验证码上显示小点

							context.strokeStyle = this.randomColor();

							context.beginPath();

							var x = Math.random() * canvas_width;

							var y = Math.random() * canvas_height;

							context.moveTo(x, y);

							context.lineTo(x + 1, y + 1);

							context.stroke();
						}
					},

					randomColor: function () {
						//得到随机的颜色值
						var r = Math.floor(Math.random() * 256);
						var g = Math.floor(Math.random() * 256);
						var b = Math.floor(Math.random() * 256);
						return "rgb(" + r + "," + g + "," + b + ")";
					},
				},

				mounted() {
					this.test();
				},
			});
		</script>
	</body>
</html>
